<template>
	<view class="content">
		<view class="header">
			<view>
				<text>保费总额(元)</text>
				<text>260100.00</text>
			</view>
			<view>
				<text>收益总额(元)</text>
				<text>12608.00</text>
			</view>
		</view>
		<view class="table">
			<view>保险公司<uni-icons type="arrowdown" size="10"></uni-icons>
			</view>
			<view>保费区间<uni-icons type="arrowdown" size="10"></uni-icons>
			</view>
			<view>投保时间<uni-icons type="arrowdown" size="10"></uni-icons>
			</view>
			<view>
				<uni-icons type="search"></uni-icons> 查询
			</view>
		</view>

		<view class="test">
			<!-- 时间 -->
			<view class="time">2018-12-10</view>
			<view class="box">
				<view class="left">
					<text>汽车保险</text>
					<uni-icons type="arrowdown" style="color: black;"></uni-icons>
				</view>
				<view class="right">
					<view>保费总额</view>
					<view>151650.0</view>
					<view>
						<text>出单率：</text>
						<text>80%</text>
						<text style="margin: 0 10upx;">|</text>
						<text>询价次数：</text>
						<text>1516508</text>
					</view>
				</view>
			</view>
			<!-- 询价车牌 -->
			<view class="quantity">


				<view>
					<view>
						<text>242</text>
						<text>询价车牌</text>
					</view>
					<view>
						<text>242</text>
						<text>总出单价</text>
					</view>
				</view>


				<view>
					<view>
						<text>242</text>
						<text>询价车牌</text>
					</view>
					<view>
						<text>242</text>
						<text>总出单价</text>
					</view>
				</view>

				<view>
					<view>
						<text>242</text>
						<text>询价车牌</text>
					</view>
					<view>
						<text>242</text>
						<text>总出单价</text>
					</view>
				</view>



			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style scoped="scoped" lang="scss">
	.quantity {
		padding: 30upx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-evenly;

		view {
			display: flex;
			flex-direction: column;
			text-align: center;
			flex: 1;

		}
	}

	.quantity>view {
		box-sizing: border-box;
		border-right: 1upx solid #efefef;
	}

	.quantity > view:nth-child(3) {
		border-right: none;
	}

	.quantity view text:nth-child(1) {
		font-weight: 600;
		font-size: 28upx;
		color: #666666;
	}

	.quantity view text:nth-child(2) {
		font-weight: 600;
		font-size: 24upx;
		color: #999999;
	}

	// 数量
	.box {
		background-color: #ffffff;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.06);
		box-sizing: border-box;
		padding: 30upx;
		display: flex;

		.left {
			display: flex;
			align-items: center;
			padding: 20upx;
			font-size: 30upx;
			border-right: 1px solid #efefef;
			font-weight: 600;
			overflow: hidden;

			text {
				white-space: normal;
			}
		}

		.right {
			flex: 2;
			padding-left: 20upx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			white-space: normal;
			justify-content: space-between;

			text {
				font-size: 26upx;
			}
		}

		// 文本
		.right text:nth-child(1),
		.right text:nth-child(4) {
			color: #7f7f7f;
		}

		.right text:nth-child(2),
		.right text:nth-child(5) {
			color: #2a84f8;
			white-space: normal;
		}




		.right view:nth-child(1) {
			font-size: 26upx;
			color: #666666;
		}

		.right view:nth-child(2) {
			font-size: 48upx;
			color: #e60012;
		}
	}

	// 时间
	.time {
		background-color: #f2f1f2;
		height: 52upx;
		width: 100%;
		letter-spacing: 0rpx;
		display: flex;
		align-items: center;
		color: #999999;
		padding-left: 30upx;
	}

	.header {
		width: 750upx;
		height: 402upx;
		display: flex;
		flex-direction: column;
		background: url(../../static/images/bf.png);
		justify-content: space-evenly;
		padding: 30upx;
		box-sizing: border-box;

		>view {
			display: flex;
			flex-direction: column;
		}
	}

	.header view text:nth-child(1) {
		color: #ffffff;
		opacity: 0.8;
		font-size: 26upx;
	}

	.header view text:nth-child(2) {
		line-height: 90upx;
		letter-spacing: 0upx;
		color: #ffffff;
		font-size: 60upx;
	}


	.user {
		justify-content: space-between;
		position: relative;
	}


	.table {
		height: 80upx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #dadada;

	}

	.table>view {
		flex: 1;
		text-align: center;
		font-size: 26upx;
		color: #7f7f7f;

	}
</style>
